<template>
	<div class="app">
		<h2>求和为：{{ sum }}</h2>
		<h2>名字为：{{ person.name }}</h2>
		<h2>年龄为：{{ person.age }}</h2>
		<h2>汽车为：{{ car }}</h2>
		<button @click="changeSum">sum+1</button>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePerson">修改整个人</button>
		<br/>
		<button @click="changeBrand">修改品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeEngine">修改发动机</button>
		<button @click="changeCar">修改整车</button>
	</div>
</template>

<script setup lang="ts" name="App">
import { ref, reactive, isReactive,shallowRef, shallowReactive } from 'vue'

/**
 * https://cn.vuejs.org/api/reactivity-advanced#shallowreactive  
 * 
 * https://cn.vuejs.org/api/reactivity-advanced#shallowref
 * 
 *  shallowRef  对于整体修改的情况，保持响应式，并且效率高
 * 
 * 
 * 和 ref() 不同， shallowRef 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

	shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。




shallowReactive() 和 reactive() 不同，这里没有深层级的转换：
一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露，这也意味着值为 ref 的属性不会被自动解包了。

 * 
 */
let sum = shallowRef(0)
let person = shallowRef({
	name: '张三',
	age: 18
})


// shallowReactive  vs  reactive
// 只关注第一层属性 可以使用shallowReactive 来保存响应式 ，只在顶层保持响应式， 这样可以提供性能 
let car = shallowReactive({
	barnd: '奔驰',
	options: {
		color: '红色',
		engine: 'V8'
	}
})

function changeSum() {
	sum.value += 1
}


//shallowRef: person shallowRef  这样 不具有响应式了. 
function changeName() {
	person.value.name = '李四'
}

// shallowRef: person shallowRef  这样 不具有响应式了. 
function changeAge() {
	person.value.age += 1
}
function changePerson() {
	person.value = { name: 'tony', age: 100 }
}
/* ****************** */
function changeBrand() {
	car.barnd = '小米SU7'
}
function changeColor() {
	car.options.color = '紫色'
}
function changeEngine() {
	car.options.engine = 'V12'
}

function changeCar() {
	const newCar = {
		barnd: '宝马',
		options: {
			color: '黑色',
			engine: '2.0T'
		}
	}
	// 保持其响应式 ，需要使用assign  
	Object.assign(car, newCar)

}




</script>

<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 5px 5px;
	padding: 5px;
	border-radius: 7px;

}
</style>